<!doctype html>
{php}
    $static = '/static/home/';
{/php}
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
    <link href="{$static}libs/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
</head>

<body data-sidebar="dark">

<style type="text/css">
    .uploader-list {
        width: 80px;
        overflow: hidden;
    }
    #picker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
    #picker .webuploader-pick {
        padding: 6px 12px;
        display: block;
        background-color: #3d8ef8;
    }
    .uploader-list {
        width: 100%;
        overflow: hidden;
    }
    @-webkit-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @-moz-keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
    @keyframes progressmove {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 17px 0;
        }
    }
</style>

<!-- Begin page -->
<div id="layout-wrapper">

    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0 font-size-18">基本资料</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">银管家</a></li>
                                    <li class="breadcrumb-item"><a href="{:url('account/index')}">账户设置</a></li>
                                    <li class="breadcrumb-item active">基本资料</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div id="uploader"  class="form-group row mb-3">
                                    <label class="col-md-2 col-form-label text-center">图像</label>
                                    <div class="col-md-2 col-xs-12">
                                        <div id="fileList" class="uploader-list">
                                            <div id="filePath" class="text-center">
                                                <img class="rounded-circle avatar-md" id="imgPath"
                                                     src="{$userInfo.userIcon|default='/static/home/images/default-avatar.jpg'}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-xs-12 text-center pt-3">
                                        <div id="picker">选择图片</div>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-md-2 col-form-label text-center">用户名</label>
                                    <div class="col-md-2 col-form-label text-center">
                                        {$userInfo.userName}
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-md-2 col-form-label text-center">手机</label>
                                    <div class="col-md-2 col-form-label text-center">
                                        {$userInfo.userPhone|default='未绑定手机'}
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-md-2 col-form-label text-center">邮箱</label>
                                    <div class="col-md-2 col-form-label text-center">
                                        {$userInfo.userEmail|default='未绑定邮箱'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->

<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>
<script src="{$static}libs/layer/layer.js"></script>

<script type="text/javascript" src="{$static}libs/webuploader/webuploader.min.js"></script>
<script type="text/javascript" src="{$static}js/app.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var uploader = WebUploader.create({
            auto: true,
            swf: '{$static}js/webuploader/Uploader.swf',
            server: "{:url('Account/editUserIcon')}",
            pick: {
                id:'#picker',
                multiple:true,
                label: '上传图像'
            },
            fileSizeLimit: 1048576 ,//限制上传所有文件大小
            fileSingleSizeLimit: 1048576,//限制上传单个文件大小
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        uploader.on( 'uploadSuccess', function(file, res) {
            if(res.errorCode === 200) {
                window.location.reload();
            }else{
                layer.alert(res.message, {
                    title: '提示',
                    icon: 2
                });
            }
        });
    });
</script>
</body>
</html>